<template>
  <div class="answer-sheet-card">
    <div class="sheet-title-wrap">
      <span class="sheet-title-bar"></span>
      <span class="sheet-title">答题卡</span>
    </div>
    <div class="sheet-divider"></div>
    <div class="sheet-type-row">
      <span class="sheet-type">测评题</span>
      <span class="sheet-count">（共{{ questions.length }}道题）</span>
    </div>
    <div class="sheet-list" ref="sheetListRef">
      <div v-for="(row, rowIdx) in groupedRows" :key="rowIdx">
        <div class="sheet-row">
          <span
            v-for="q in row"
            :key="q.questionId"
            :class="[
              'sheet-item',
              answers[q.questionId] ? 'answered' : 'unanswered',
            ]"
            @click="scrollToQuestion(q.questionNo)"
          >
            {{ q.questionNo }}
          </span>
        </div>
        <div
          v-if="rowIdx !== groupedRows.length - 1"
          class="sheet-row-divider"
        ></div>
      </div>
    </div>
    <div class="sheet-legend">
      <span class="legend-item answered"></span
      ><span class="legend-label">已答</span>
      <span class="legend-item unanswered"></span
      ><span class="legend-label">未做</span>
      <!-- <span class="legend-item marked"></span
      ><span class="legend-label">标记</span> -->
    </div>
    <div class="sheet-footer">
      <el-button
        type="primary"
        size="large"
        class="sheet-submit-btn"
        @click="handleSubmit"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from "vue";
const props = defineProps({
  questions: Array,
  answers: Object,
});
const emit = defineEmits(["submit"]);
function scrollToQuestion(no) {
  // 假设每题有id="question-题号"
  const el = document.getElementById("question-" + no);
  if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
}
const sheetListRef = ref(null);
const itemsPerRow = ref(6);

function calcItemsPerRow() {
  const el = sheetListRef.value;
  if (!el) return;
  const gap = 32; // 与 .sheet-row gap 一致
  const itemWidth = 48; // .sheet-item 宽度
  const available = el.clientWidth;
  const possible = Math.floor((available + gap) / (itemWidth + gap));
  itemsPerRow.value = Math.max(2, possible);
}

onMounted(() => {
  calcItemsPerRow();
  const ro = new ResizeObserver(() => calcItemsPerRow());
  if (sheetListRef.value) ro.observe(sheetListRef.value);
  sheetListRef.value.__ro = ro; // 保存引用
});

onUnmounted(() => {
  const ro = sheetListRef.value?.__ro;
  if (ro) ro.disconnect();
});

const groupedRows = computed(() => {
  const res = [];
  const arr = props.questions || [];
  const per = itemsPerRow.value;
  for (let i = 0; i < arr.length; i += per) {
    res.push(arr.slice(i, i + per));
  }
  return res;
});
function handleSubmit() {
  emit("submit");
}
</script>

<style scoped>
.answer-sheet-card {
  background: #fff;
  border-radius: 16px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04); */
  padding: 24px 24px 20px 24px;
  margin-bottom: 18px;
  width: 100%;
  box-sizing: border-box;
  max-height: 350px;
}
.sheet-title-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.sheet-title-bar {
  width: 4px;
  height: 20px;
  background: #2196f3;
  border-radius: 2px;
  margin-right: 10px;
}
.sheet-title {
  font-size: 20px;
  font-weight: bold;
  color: #222;
}
.sheet-divider {
  height: 1px;
  background: #f2f3f5;
  margin: 10px 0 15px 0;
  width: 100%;
}
.sheet-type-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 15px;
}
.sheet-type {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  margin-right: 8px;
}
.sheet-count {
  font-size: 14px;
  color: #bbb;
}
.sheet-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
  position: relative;
  max-height: 200px; /* 进一步限制高度 */
  overflow-y: auto; /* 添加垂直滚动 */
  overflow-x: hidden;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Webkit浏览器隐藏滚动条 */
.sheet-list::-webkit-scrollbar {
  display: none;
}
.sheet-row {
  display: flex;
  flex-direction: row;
  gap: 32px;
  margin-bottom: 18px;
  justify-content: center;
}
.sheet-item {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 2px solid #cccccc;
  cursor: pointer;
  background: #fff;
  color: #666666;
  font-weight: bold;
  font-size: 14px;
  transition: all 0.18s;
  box-shadow: none;
  user-select: none;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}
.sheet-item.answered {
  background: #2196f3;
  color: #fff;
  border-color: #2196f3;
  box-shadow: 0 2px 8px 0 rgba(33, 150, 243, 0.1);
}
.sheet-item.unanswered {
  background: #fff;
  color: #888;
  border-color: #d3d6db;
}
.sheet-item:hover {
  box-shadow: 0 4px 16px 0 rgba(33, 150, 243, 0.13);
  border-color: #2196f3;
}
.sheet-row-divider {
  display: none;
}
.sheet-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 15px 0 0 0;
  font-size: 15px;
}
.legend-item {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
  border: 2px solid #d3d6db;
  background: #fff;
}
.legend-item.answered {
  background: #2196f3;
  border-color: #2196f3;
}
.legend-item.unanswered {
  background: #fff;
  border-color: #d3d6db;
}
.legend-item.marked {
  background: #8ec6ff;
  border-color: #8ec6ff;
}
.legend-label {
  margin-right: 18px;
  color: #888;
  font-size: 15px;
}
.sheet-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.sheet-submit-btn {
  width: 112px;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
}
</style>
